{extend name='layout/app' /}

{block name="css"}

{/block}

{block name="content"}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>注册用户</div>
    </div>

    <div class="cropper-content">
        <div class="cropper">       
            <vueCropper
                    ref="cropper"
                    :centerBox="true"
                    :img="option.img"
                    :outputSize="option.size"
                    :outputType="option.outputType"
                    :info="true" :full="option.full"
                    :canMove="option.canMove"
                    :canMoveBox="option.canMoveBox"
                    :original="option.original"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixedBox="option.fixedBox"
                    @realTime="realTime"
                    @imgLoad="imgLoad">
            </vueCropper>     
        </div>     
        <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">       
            <div :style="previews.div" class="preview">         
                <img :src="previews.url" :style="previews.img">       
            </div>     
        </div>   
    </div>   
    <div class="footer-btn">     
        <div class="scope-btn">       
            <label for="uploads" class="label-success">选择图片</label>       
            <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">       
            <el-button style="margin-left: 100px;" type="primary" @click="rotateLeft">         
                <span style="font-weight: 600;">↺</span>       
            </el-button>       
            <el-button type="primary" @click="rotateRight">         
                <span style="font-weight: 600;">↻</span>       
            </el-button>     
        </div>     
        <div class="upload-btn">       
            <el-button :loading="isLoading" style="margin-left:20px" type="success" :style="'margin-left: 46px'" @click="down('base64')">完成上传</el-button>     
        </div>   
    </div> 
</div>
{/block}

{block name="footer"}{/block}
{block name="js"}
<script src="/static/layer/layer.js"></script>
<script>
    var that
    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
        21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
        33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
        42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
        51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
        63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
    };
    new Vue({
        el:'#app',
        data: {
            name: '',
            phone: '',
            captcha: '',
            pwd: '',
            password_confirm:'',
            ID_Card: '',
            fileList: [],
            codeStatus: true
        },
        mounted() {
            that = this  //生成vue副本
            $('.reg-item input').focus(function () {
                $(this).parent().siblings('.tips').hide()
            })
            $('.reg-item input').blur(function () {
                var filter,text1,text2
                if($(this)[0].id == 'ID_Card') {
                    return
                }
                switch ($(this)[0].id) {
                    case 'name':
                        filter = /^[\u4e00-\u9fa5]{2,}$/i;
                        text1 = '姓名不能为空';
                        text2 = '至少为两个汉字';
                        break;
                    case 'phone':
                        filter = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                        text1 = '手机号不能为空';
                        text2 = '手机号格式错误';
                        break;
                    case 'captcha':
                        filter = /^\d{6}$/;
                        text1 = '验证码不能为空';
                        text2 = '请输入6位数字验证码';
                        break;
                    case 'pwd':
                        filter = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
                        text1 = '密码不能为空';
                        text2 = '请填写两种字符以上的组合';
                        break;
                    case 'password_confirm':
                        filter = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
                        text1 = '确认密码不能为空';
                        text2 = '请填写两种字符以上的组合';
                        break;
                }
                that.checkTip($(this).val(),$(this),filter,text1,text2)
            })
        },
        /*directives: {
            'myblur'(el, binding, vnode) {
                let check = el.querySelector('input')
                check.onblur = function () {
                    var checkName = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/   //验证姓名正则
                    // console.log(that.name)

                    if(that.name && !checkName.test(that.name)) {
                        $('#name').parents('.reg-item').find('.tips').html('请输入真实姓名')
                        return
                    }
                    $('#name').parents('.reg-item').find('.tips').html('')
                }
            }
        },*/
        methods: {
            back() {
                history.go(-1)
            },
            //头像
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            checkTip(val,current,filter,text1,text2) {
                if(!val) {
                    current.parent().siblings('.tips').show().text(text1)
                }else if(!filter.test(val)) {
                    current.parent().siblings('.tips').show().text(text2)
                }else {
                    current.parent().siblings('.tips').hide().text('')
                }
            },
            //电话号码
            getCaptcha(e) {
                var telCheck = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                if(!this.phone) {
                    $('#phone').parents('.reg-item').find('.tips').html('请输入手机号')
                    return
                }
                if(!telCheck.test(this.phone)) {
                    $('#phone').parents('.reg-item').find('.tips').html('请输入正确的手机号')
                    return
                }
                $('#phone').parents('.reg-item').find('.tips').html('')
                if(!that.codeStatus) {
                    return
                }
                var _thisBtn = $(e.currentTarget)
                $.post('/api/sms/getCaptcha',{phone:that.phone},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        that.codeStatus = false
                        var time = 60
                        var t = setInterval(() => {
                            time--
                            _thisBtn.text(time+'s')
                            if(time === 0) {
                                clearInterval(t)
                                _thisBtn.text('获取验证码')
                                that.codeStatus = true
                            }
                        },1000)
                    }
                },'json')
            },
            //身份证
            checkCard() {
                var truename=document.getElementById("name").value;
                var reg = /^[\u4e00-\u9fa5]{2}$/i;
                if (!reg.test(truename)) {
                    // alert("请输入真实姓名，只能是2-4个汉字！");

                    document.getElementById('name').focus();
                }
                else{
                    var card = document.getElementById('ID_Card').value;
                    //是否为空
                    if(card === '')
                    {
                        alert('请输入身份证号，身份证号不能为空');
                        document.getElementById('ID_Card').focus();
                        return false;
                    }
                    //校验长度，类型
                    if(this.isCardNo(card) === false)
                    {
                        alert('您输入的身份证号码不正确，请重新输入');
                        document.getElementById('ID_Card').focus();
                        return false;
                    }
                    //检查省份
                    if(this.checkProvince(card) === false)
                    {
                        alert('您输入的身份证号码不正确,请重新输入');
                        document.getElementById('ID_Card').focus();
                        return false;
                    }
                    //校验生日
                    if(this.checkBirthday(card) === false)
                    {
                        alert('您输入的身份证号码生日不正确,请重新输入');
                        document.getElementById('ID_Card').focus();
                        return false;
                    }
                    //检验位的检测
                    if(this.checkParity(card) === false)
                    {
                        alert('您的身份证校验位不正确,请重新输入');
                        document.getElementById('ID_Card').focus();
                        return false;
                    }
                    // alert('身份证验证通过，可以注册');
                    return true;
                }
            },
            //检查号码是否符合规范，包括长度，类型
            isCardNo(card) {
                //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
                if(reg.test(card) === false)
                {
                    return false;
                }

                return true;
            },
            //取身份证前两位,校验省份
            checkProvince(card) {
                var province = card.substr(0,2);
                if(vcity[province] == undefined)
                {
                    return false;
                }
                return true;
            },
            //检查生日是否正确
            checkBirthday(card) {
                var len = card.length;
                //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
                if(len == '15')
                {
                    var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
                    var arr_data = card.match(re_fifteen);
                    var year = arr_data[2];
                    var month = arr_data[3];
                    var day = arr_data[4];
                    var birthday = new Date('19'+year+'/'+month+'/'+day);
                    return this.verifyBirthday('19'+year,month,day,birthday);
                }
                //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
                if(len == '18')
                {
                    var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
                    var arr_data = card.match(re_eighteen);
                    var year = arr_data[2];
                    var month = arr_data[3];
                    var day = arr_data[4];
                    var birthday = new Date(year+'/'+month+'/'+day);
                    return this.verifyBirthday(year,month,day,birthday);
                }
                return false;
            },
            //校验日期
            verifyBirthday(year,month,day,birthday) {
                var now = new Date();
                var now_year = now.getFullYear();
                //年月日是否合理
                if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)
                {
                    //判断年份的范围（3岁到100岁之间)
                    var time = now_year - year;
                    if(time >= 3 && time <= 100)
                    {
                        return true;
                    }
                    return false;
                }
                return false;
            },
            //校验位的检测
            checkParity(card) {
                //15位转18位
                card = this.changeFivteenToEighteen(card);
                var len = card.length;
                if(len == '18')
                {
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                    var cardTemp = 0, i, valnum;
                    for(i = 0; i < 17; i ++)
                    {
                        cardTemp += card.substr(i, 1) * arrInt[i];
                    }
                    valnum = arrCh[cardTemp % 11];
                    if (valnum == card.substr(17, 1))
                    {
                        return true;
                    }
                    return false;
                }
                return false;
            },
            //15位转18位身份证号
            changeFivteenToEighteen(card) {
                if(card.length == '15')
                {
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                    var cardTemp = 0, i;
                    card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
                    for(i = 0; i < 17; i ++)
                    {
                        cardTemp += card.substr(i, 1) * arrInt[i];
                    }
                    card += arrCh[cardTemp % 11];
                    return card;
                }
                return card;
            },
            // 提交时判断
            btnReg() {
                console.log('1');
                if(!$('#phone').val() || !$('#captcha').val() || !$('#pwd').val() || !$('#password_confirm').val() || !$('#name').val() || !$('#ID_Card').val()) {
                    alert('请完善信息')
                    return
                }
                var pwd1 = $("#pwd").val();
                var pwd2 = $("#password_confirm").val();
                if(pwd1 != pwd2){
                    alert("两次输入的密码不一致！");
                    return
                }
                var errorCount = 0
                for(i=0;i<$('.tips').length;i++) {
                    if($('.tips')[i].innerText) {
                        errorCount++
                    }
                }
                console.log(errorCount);
                if(errorCount > 0) {
                    return
                }
                console.log('2');
                this.checkCard();
                console.log('3');
                $.post('/index/register/store',{
                    imageUrl:this.imageUrl,
                    phone: this.phone,
                    captcha: this.captcha,
                    password: this.pwd,
                    password_confirm: this.password_confirm,
                    name: this.name,
                    id_card: this.ID_Card
                },function (res) {
                    console.log(res)
                    if(res.code === 0){
                        alert("注册成功");
                        window.location.href = '/login';
                    }else{
                        layer.alert(res.msg);
                    }
                },'json')
            }
        }
    });
</script>
{/block}